<template>

  <div id="progressbar" ref="progressbar" v-show='loading == true && show == true'>
      <div class="border">
          <div class="bar" ref="bar">&nbsp;</div>
          <div class="desc" ref="desc">正在创建...</div>
      </div>
  </div>
  <!-- 正式或测试 -->
    <a-modal v-model:visible="visible" title="选择发起环境" @ok="handleOk">
      <template #footer>
        <a-button key="back" @click="ceshi" style="padding: 0px 10px;">测试</a-button>
        <a-button key="submit" type="primary"  @click="zhengshi" style="padding: 0px 10px;">正式</a-button>
      </template>
      <p>请选择发起环境</p>
    </a-modal>
</template>

<script>
import { request } from "../../utils/request";
import { DownOutlined } from '@ant-design/icons-vue';

let idx = 0;
let time = 500;
let timer;
     
export default {
 data() {
    return {
      loading: true, // 加载中
      ModalText: '确认是否开始创建流程',
      show: false, // 显示加载
      idx,
      time,
      timer,
      visible: false
    }
  },
  mounted(){
    
    this.init();  
    
  },
  methods:{
    init(){
     
      this.showConfirm()
     
    },
    // 创建流程
    doCreateWorkflowRequest(url){
      console.log(url);
      debugger
      request({ 
            url: `/api/xinxibupingfen/?urlStr=${url}`,
            method: "get",
          }).then((res)=>{
            this.death()
      })
    },
    // 创建正/测试流程询问
    showConfirm() { 
      const _this = this;
      this.$confirm({
        okText:"确定",
        cancelText:"取消",
        title: '确认开始创建流程吗?',
        onOk() {
          _this.visible = true
          // _this.show = true;
          // _this.create();
          // _this.doCreateWorkflowRequest();
        
        },
        onCancel() {
    
        },
        class: 'test',
      });
    },
    // 创建流程-正式
    zhengshi() {
      this.visible = false;
      this.show = true;
      this.create();
      this.doCreateWorkflowRequest("http://10.0.6.90:86");
    },
     // 创建流程-测试
    ceshi() {
      this.visible = false;
      this.show = true;
      this.create();
      this.doCreateWorkflowRequest("http://10.0.100.247:8090");
    },
    // 加载中...
    create(){
      this.timer = setInterval(()=>{
        if(this.idx >= 100){
          this.idx = 0
         }
        this.idx += 5;
        this.$refs.bar.style.setProperty("--barWidth",this.idx + "%");
        }, time += 300);
    },
    // 加载结束
    death() {
        // clearTimeout(this.timer);
        clearInterval(this.timer);
        this.$refs.desc.innerHTML = "创建完成";
        this.$refs.bar.style.setProperty("--barWidth",100 + "%");
        
    }
  },

    components: {
      DownOutlined,
    },
};
</script>
<style scoped>
  .example {
      text-align: center;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      margin-bottom: 20px;
      padding: 30px 50px;
      margin: 20px 0;
  }
  * {
      padding: 0;
      margin: 0;
  }

  #progressbar {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: white;
      z-index: 99999;
  }

  #progressbar .border {
      border: 1px solid #777;
      width: 275px;
      height: 14px;
      padding: 1px;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 7px;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
  }

  #progressbar .bar {
      background-color: #73c944;
      width: var(--barWidth);
      height: 14px;
      border-radius: 6px;
      overflow: hidden;
  }

  #progressbar .desc {
      text-align: center;
      font-size: 12px;
      line-height: 24px;
  }
</style>